import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yysk_app/enum/app_enum.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/widget/custom_app_bar2.dart';
import 'package:yysk_app/widget/image_asset_widget.dart';
import 'manage_bank_controller.dart';

class ManageBankPage extends GetView<ManageBankController> {
  static const String path = '/manageBank';

  @override
  Widget build(BuildContext context) {
    // final type = Get.arguments?['type'] as ManageBankType?;
    final double top = MediaQuery.of(context).padding.top;
    return Scaffold(
      body: Stack(
        children: [
          //添加背景色，代码如下：
          SizedBox(
            width: context.width,
            child: ImageAssetWidget(
              width: double.infinity,
              height: 173.px,
              imageUrl: 'static/images/wallet/top_bg.png',
            ),
          ),
          Positioned(
            right: 0,
            bottom: 0,
            child: ImageAssetWidget(
              width: 216.px,
              height: 253.px,
              imageUrl: 'static/images/wallet/bottom_bg.png',
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(0, top, 0, 24.px),
            child: Column(
              children: [
                CustomAppBar2(title: '银行卡管理', context: context),
                Expanded(
                  child: Obx(() {
                    return Stack(
                      children: [
                        Column(
                          children: [
                            const SizedBox(height: 30),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                controller.type.value == '1'
                                    ? Row(
                                      children: [
                                        _buildTab('付款卡', 0),
                                        SizedBox(width: 76.px),
                                      ],
                                    )
                                    : Text(''),
                                _buildTab('提现卡', 1),
                              ],
                            ),
                            SizedBox(height: 24.px),
                            Expanded(
                              child: ListView(
                                padding: const EdgeInsets.symmetric(
                                  horizontal: 16,
                                ),
                                children: [
                                  ..._buildCardList(),
                                  _buildAddCardButton()
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    );
                  }),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTab(String title, int index) {
    return GestureDetector(
      onTap: () => controller.switchTab(index),
      child: Obx(
        () => Text(
          title,
          style: TextStyle(
            fontSize: 14.px,
            fontWeight:
                controller.tabIndex.value == index
                    ? FontWeight.bold
                    : FontWeight.normal,
            color:
                controller.tabIndex.value == index ? Colors.black : Colors.grey,
          ),
        ),
      ),
    );
  }

  List<Widget> _buildCardList() {
    final cards =
        controller.tabIndex.value == 0
            ? controller.payCards
            : controller.payCards;
    if (cards.isEmpty) {
      return [SizedBox(height: 32)];
    }
    return cards
        .map(
          (card) => GestureDetector(
            onTap: () {},
            child: Container(
              margin: EdgeInsets.only(bottom: 21.px),
              padding: EdgeInsets.fromLTRB(19.px, 0, 0, 22.px),
              width: 335.px,
              height: 150.px,
              decoration: BoxDecoration(
                color: Colors.black87,
                borderRadius: BorderRadius.circular(8.px),
                image: DecorationImage(
                  image: AssetImage('static/images/wallet/card_cell_bg.png'),
                  fit: BoxFit.cover,
                ),
              ),
              child: Stack(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(height: 27.px),
                      Text(
                        '**** **** **** ${card.bankCardNo}',
                        style: TextStyle(
                          color: AppColors.fontColor,
                          fontSize: 22.px,
                        ),
                      ),
                      SizedBox(height: 28.px),
                      Text(
                        '${card.bankName}',
                        style: TextStyle(
                          color: AppColors.fontColor,
                          fontSize: 13.px,
                        ),
                      ),
                      SizedBox(height: 2.px),
                      Text(
                        '储蓄卡',
                        style: TextStyle(
                          color: AppColors.fontColor,
                          fontSize: 7.4.px,
                        ),
                      ),
                    ],
                  ),
                  card.bindType != 'WITHDRAW'
                      ? Positioned(
                        top: 6.px,
                        right: 6.px,
                        child: GestureDetector(
                          onTap: () {
                            controller.unbindCardTap('${card.id}');
                          },
                          child: Container(
                            height: 23.px,
                            padding: EdgeInsets.only(left: 16.px, right: 16.px),
                            decoration: BoxDecoration(
                              color: Color.fromRGBO(255, 255, 255, 0.1),
                              borderRadius: BorderRadius.circular(100.px),
                            ),
                            child: Center(
                              child: Text(
                                '解绑',
                                style: TextStyle(
                                  fontSize: 12.px,
                                  color: AppColors.fontColor,
                                ),
                              ),
                            ),
                          ),
                        ),
                      )
                      : SizedBox(),
                ],
              ),
            ),
          ),
        )
        .toList();
  }

  Widget _buildAddCardButton() {
    return GestureDetector(
      onTap: controller.checkWalletAndAddCard,
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 20.px),
        padding: const EdgeInsets.symmetric(vertical: 20),
        height: 72.px,
        decoration: BoxDecoration(
          color: AppColors.backgroundColorLightGrey,
          borderRadius: BorderRadius.circular(16),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon((controller.tabIndex.value==1&&controller.payCards.length==1)?Icons.edit_calendar:Icons.add, color: AppColors.fontColorBlack),
            SizedBox(width: 13.px),
            Obx(()=>Text(
              (controller.tabIndex.value==1&&controller.payCards.length==1)?'修改提现卡': '添加银行卡',
              style: TextStyle(
                fontSize: 18.px,
                color: AppColors.fontColorBlack,
              ),
            )),
          ],
        ),
      ),
    );
  }
}
